<template>
  <div id="app">
    <!-- isShow默认是false, 暂时不知道其作用-->
    <router-view v-if="!isShow" />

    <!-- 左侧边栏 -->
    <tab-bar
      v-if="isShow"
      :style="{ display: tabbarDisplay }"
      id="l-tab"
      :nowNav="nowNav"
    ></tab-bar>

    <!-- 开关 就是侧边栏的那个小箭头-->
    <div v-if="isShow" class="fold" @click="kg">
      <img :src="a" />
    </div>

    <div id="content" v-if="isShow">
      <!-- 顶部 这个不是内容展示区的部分-->
      <top-nav class="topNav" @changeNav="changeNav" v-if="isShow"></top-nav>
      <!-- 内容展示区 -->
      <div class="content_1">
        <keep-alive :include="topList">
          <!--这个是内容展示区的出口 -->
          <router-view />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import TabBar from './components/TabBar'
import TopNav from './components/TopNav'
import cookieFn from './components/mixins/cookieFn'

import { mapGetters } from 'vuex'

// resources 侧边栏数组源
const resources = require('./config/tabBar.js')

export default {
  name: 'app',
  mixins: [cookieFn],
  beforeCreate() {
    // beforeCreate()，created(), beforeMount(), mounted() 都可以
    // console.log('app beforeCreate')
    // if(this.$router.path !== '/home'){
    //   this.$router.replace('/home')
    // }
  },
  created() {
    if (!String.prototype.includes) {
      String.prototype.includes = function (search, start) {
        if (typeof start !== 'number') {
          start = 0
        }

        if (start + search.length > this.length) {
          return false
        } else {
          return this.indexOf(search, start) !== -1
        }
      }
    }
    let isIE = this.IEVersion()
    this.$store.state.IEversion = isIE
    // console.log(isIE)
    if (isIE != -1) {
      if (isIE < 11) {
        // this.$alert('您的IE浏览器版本过低，请升级IE到11，或使用chrom浏览器或火狐浏览器', '', {
        //   confirmButtonText: '确定'
        // })
        this.$alert(
          `<p>请 <a href="https://support.microsoft.com/zh-cn/help/18520/download-internet-explorer-11-offline-installer">升级IE</a> 到11</p>
        <p>或使用chrom浏览器，<a href="https://www.google.cn/intl/zh-CN/chrome/">点击下载chrome</a></p>
        <p>或使用火狐浏览器，<a href="http://www.firefox.com.cn/">点击下载火狐</a></p>`,
          '您的IE浏览器版本过低',
          {
            dangerouslyUseHTMLString: true
          }
        )
      }
    }
    // console.log(window.location.pathname)
    if (
      window.location.pathname != '/login' &&
      window.location.pathname != '/'
    ) {
      // 不是登陆的时候的刷新
      // 直营店不看首页，直接看店铺销售
      // console.log(this.getCookie('jxStore') == 1)
      // console.log(this.getCookie('jxAgent') == 1)
      if (this.getCookie('jxStore') == 1 || this.getCookie('jxAgent') == 1) {
        this.$store.commit('store')
        // this.$router.push('/stores/store_sales_s')
      } else {
        // this.$router.push('/home')
      }
      const menuList = resources.menuList
      for (const i of menuList) {
        // console.log(i)
        for (const j of i.secondaryMenu) {
          if (window.location.pathname == j.path) {
            this.$store.commit('addNav', j)
            return
          }
        }
      }
    }
  },
  components: {
    TabBar,
    TopNav
  },
  data() {
    return {
      a: require('./assets/img/home/1.png'),
      nowNav: '',
      tabbarDisplay: 'block',
      isShow: false,

      topList: [] // 用来存state.NavList里面item.name, 暂时不知道何用
    }
  },
  methods: {
    kg() {
      var a = document.getElementById('l-tab')
      // console.log(a)
      if (this.tabbarDisplay == 'block') {
        this.tabbarDisplay = 'none'
        this.a = require('./assets/img/home/-1.png')
        document.getElementById('content').style.width = '99.2vw'
      } else {
        this.tabbarDisplay = 'block'
        this.a = require('./assets/img/home/1.png')
        document.getElementById('content').style.width = '89.2vw'
      }
    },
    // 这个是顶部组件的每一个标签被点击的时候，监听到的函数 str是上面子组件传过来的数据： 是item.label
    changeNav(str) {
      // console.log(str);
      this.$forceUpdate() //  调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。
      if (str == '开通服务') {
        this.$router.push('/peningservice/opening_service')
        return
      } else if (str == '列印吊牌1' || str == '列印洗标1') {
        this.$router.push('/basic_info/tags1')
        return
      } else if (str == '列印吊牌2' || str == '列印洗标2') {
        this.$router.push('/basic_info/tags2')
        return
      } else if (str == '首页') {
        this.$router.push('/home')
        return
      }
      // else if (str == '厂商进货' || str == '厂商退货' || str == '客户进货' || str == '客户退货' || str == '客户销货' || str == '客户订货' || str == '厂商订货') {
      //   for (const i of this.getNavList) {
      //     if (i.label == str) {
      //       this.$router.push(i.path)
      //     }
      //   }
      //   return
      // }
      if (str.indexOf('删单') == -1 || str.indexOf('列印') == -1) {
        this.$store.commit('delDynamicPage')
      }
      let menuList = resources.menuList // 遍历导进来的侧边栏的数组
      // console.log(menuList)
      for (const key of menuList) {
        const list = key.secondaryMenu
        for (const item of list) {
          // 双重for循环遍历二级子菜单，当点击的时候，调转到对应的页面
          if (item.label == str) {
            this.$router.push(item.path)
            return
          }
        }
      }
    },
    IEVersion() {
      let userAgent = navigator.userAgent //取得浏览器的userAgent字符串
      let isIE =
        userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
      let isEdge = userAgent.indexOf('Edge') > -1 && !isIE //判断是否IE的Edge浏览器
      let isIE11 =
        userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
      if (isIE) {
        let reIE = new RegExp('MSIE (\\d+\\.\\d+);')
        reIE.test(userAgent)
        let fIEVersion = parseFloat(RegExp['$1'])
        if (fIEVersion == 7) {
          return 7
        } else if (fIEVersion == 8) {
          return 8
        } else if (fIEVersion == 9) {
          return 9
        } else if (fIEVersion == 10) {
          return 10
        } else {
          return 6 //IE版本<=7
        }
      } else if (isEdge) {
        return 'edge' //edge
      } else if (isIE11) {
        return 11 //IE11
      } else {
        return -1 //不是ie浏览器
      }
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(['getNavList'])
  },
  watch: {
    // 监听路由的参数对象的变化，如果
    $route(a, b) {
      // 第一个参数为新值，第二个参数为旧值，如果路由不等于这四个值的话，那么就让侧边栏显示，否则就隐藏
      if (
        a.path != '/login' &&
        a.path != '/404' &&
        a.path != '/500' &&
        a.path != '/detail'
      ) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // getNavList就是vuex中state.navList这个数组
    getNavList(a, b) {
      // console.log(a); // 第一个是新值的参数，第二个是旧值的参数值
      this.topList = [] // a 是这个新值的变化，就是刚开始的的时候，就是state.navList的变化
      a.forEach((e) => {
        this.topList.push(e.name)
      })
      // console.log(this.topList)
      // a.forEach((e,i) => {
      //   if (i) {
      //     if (this.topList.length) {
      //       for (const f of this.topList) {
      //         if (f == e.name) {
      //           break
      //         }
      //       }
      //       this.topList.push(e.name)
      //     } else {
      //       this.topList.push(e.name)
      //     }
      //   }
      // })
      // console.log(this.topList); // ['home', 'brand_doc', 'client_return_mn', 'client_receivable']
    }
  }
}
</script>

<style>
@import 'assets/css/normalize.css';
@import 'assets/css/base.css';
#app {
  display: flex;
}
input {
  color: #606266;
  font-size: 15px;
}
#content {
  width: 89.2vw;
}
.fold {
  width: 0.8vw;
  background: #f4f4f4;
  height: 100vh;
  padding-top: 10%;
}
.fold img {
  position: relative;
  width: 14px;
  height: 20px;
  top: 230px;
}
.content_1 {
  background: #f4f4f4;
  width: 100%;
  overflow: auto;
  padding-top: 1vh;
}
input:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.el-pagination .el-input__inner {
  width: auto;
}

.newTypeId .el-input--suffix {
  width: 80px;
  margin: 14px 0 0 10px;
}
.newTypeId .el-input {
  width: 90px;
  margin: 14px 0 0 10px;
}
.el-pagination__jump .el-pagination__editor {
  margin: 0;
}

/* 设置表格点击行高亮颜色 */
.el-table__body tr.current-row > td {
  background: #f0f7ff !important;
}
.vxe-table .vxe-body--row.row--current {
  background: #f0f7ff !important;
}
/* 表头黑色字体 */
.el-table th > .cell {
  color: black;
}

.el-button {
  padding: 8px 15px !important;
  height: 30px;
  /* margin-right: 15px!important; */
}

.el-message-box a {
  text-decoration: none;
  color: #017aff;
}

/* ie input 内容下沉 */
.el-input__inner {
  line-height: 30px !important;
}

.v-modal {
  display: none !important;
}
.dr {
  display: inline-block;
  line-height: 29px;
  border: 1px solid #d7dae2;
  border-radius: 4px;
  position: relative;
  color: #606266;
  text-align: center;
  font-size: 14px;
  padding: 0 15px;
  margin-right: 10px;
  height: 30px;
  white-space: nowrap;
}
.dr:hover {
  color: #017aff;
  border-color: rgb(179, 215, 255);
  background-color: rgb(230, 242, 255);
  cursor: pointer;
}
.outputlist_upload {
  opacity: 0;
  position: absolute;
  left: 0px;
  overflow: hidden;
  width: 75px;
  cursor: pointer;
  height: 27px;
}

/* 编辑表格样式 */
.tb-edit .el-table__body tr:hover > td {
  background-color: #fff !important;
}
.innerInp .el-input__inner {
  border: none;
}
.minipadInp .el-input__inner {
  padding: 0 5px;
}

.el-table__footer td {
  padding: 0 !important;
  height: 36px;
}

.el-loading-mask {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

/* 提示居中 */
.el-message--success,
.el-message--error,
.el-message--info {
  top: 40% !important;
}

/* 生成明细图片 */
#createImg {
  text-align: center;
  padding: 0 20px;
  width: 210mm;
}
#createImg table {
  border: 2px solid black;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 25px;
  table-layout: fixed;
  text-align: center;
}
#createImg td {
  overflow: hidden;
  text-align: center;
}
#createImg td + td {
  border-left: 1px dotted;
}
#createImg .rightTag {
  position: absolute;
  right: 0;
  writing-mode: vertical-rl;
  margin: 0;
  height: 10cm;
}
#createImg .info {
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
  font-size: 15px;
}
#createImg .printHead {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-bottom: 3px dotted;
  position: relative;
  transform: translateX(-50%);
}
</style>
